<template>
  <!-- 头条信息展示区域 -->
  <view class="infoContainer" >
  	<view class="viewItem" v-for="(headline, index) in headlinesData" :key="headline.articleId" @click="totoutiaoDetail(headline.articleId)">
  		<view class="left">
  			<view class="top">
  				<text>{{ headline.content }}</text>
  			</view>
  			<view class="bottom">
  				<image :src="headline.healthimage" mode=""></image>
  				<text>健客新健康</text>
  				<text>{{ headline.favourCount }}次浏览</text>
  			</view>
  		</view>
  		<view class="right"><image :src="headline.cover[0]" mode=""></image></view>
  	</view>
  </view>
</template>

<script>
export default {
    name:'',
	props:['headlinesData'],
	methods:{
		totoutiaoDetail(id){
			uni.navigateTo({
				url:`../../pages/headlineDetail/headlineDetail?id=${id}`
			})
		}
	}
}
</script>

<style lang='stylus'>
.infoContainer
		margin-top 10rpx
		height 100%
		.viewItem
			width 100%
			height 300rpx
			border-bottom 1rpx solid #ccc
			display flex
			.left
				width 60%
				height 300rpx
				padding 20rpx
				.top
					height 90rpx
					color #222222
					width 100%
					display -webkit-box
					/* 纵向对齐 */
					-webkit-box-orient vertical
					/* 第二行有省略号 */
					-webkit-line-clamp 2
					overflow hidden
					text-overflow ellipsis
					padding 30rpx 0
				.bottom
					margin-top 20rpx
					display flex
					justify-content space-between
					image
						width 50rpx
						height 50rpx
						border-radius 50%
					text
						color #777777
			.right
				width 30%
				height 300rpx
				image
					margin-top 50rpx
					width 100%
					height 200rpx
</style>
